<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>

    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="../../lib/element-ui/element-ui-2.8.2.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>

<div id="app">

    <el-row type="flex" justify="start">

        <el-col :span="10">

            <el-table
                    stripe
                    :data="tableData"
                    style="width: 90%"
                    @row-click="rowClick"
            >

                <el-table-column
                        type="index"
                        align="center"
                >
                </el-table-column>


                <el-table-column label="用户id" prop="userId" align="center">

                </el-table-column>
                <el-table-column label="姓名" prop="name" align="center">

                </el-table-column>


            </el-table>


        </el-col>

        <el-col :span="14">

            <el-form v-model="form" :ref="form" label-width="80px" v-if=" form.userAccount!='' ">

                <el-form-item label="用户名">
                    <el-input v-model="form.name" readonly></el-input>
                </el-form-item>
                <el-form-item label="登录名">

                    <el-input v-model="form.userAccount" readonly></el-input>
                </el-form-item>

                <el-form-item label="身份证号">
                    <el-input v-model="form.idCard" readonly></el-input>
                </el-form-item>
                <el-form-item label="部门">

                    <el-radio-group v-model="userDept" @change="handleCheckedChange">

                        <el-radio-button
                                v-for="item in deptList"
                                :label="item.deptCode"
                        >

                            {{item.deptName}}
                        </el-radio-button>

                    </el-radio-group>

                </el-form-item>
                <el-form-item label="角色">

                    <el-checkbox-group v-model="form.selectRole">

                        <el-checkbox
                                v-for="item in roleList"
                                :label="item.roleNo"
                                :value="item.roleNo"
                                :key="item.roleNo"
                        >
                            {{item.roleName}}
                        </el-checkbox>

                    </el-checkbox-group>


                </el-form-item>
                <el-form-item label="是否在职">

                    <el-switch
                            v-model="form.isActive"
                            inactive-text="否"
                            active-text="是"
                    >
                    </el-switch>
                </el-form-item>

                <el-form-item>

                    <el-popover transition="fade-in-linear" v-model="visitPop">

                        <el-form-item label="身份证">

                            <el-input v-model="inputIdCard" placeholder="输入身份证号" show-word-limit></el-input>

                            <div style="text-align: right; margin: 0">

                                <el-button round @click="visitPop=false" size="mini">取消</el-button>
                                <el-button type="danger" round size="mini" @click="resetPassword">确定</el-button>
                            </div>

                        </el-form-item>

                        <el-button slot="reference" type="danger" round>重置密码</el-button>
                        <el-button slot="reference" round @click="updateUser">保存更改</el-button>
                    </el-popover>
                </el-form-item>


            </el-form>


        </el-col>
    </el-row>
</div>

</body>
</html>

<script src="../../lib/jQuery-3.31/jquery-3.3.1.js"></script>
<script src="../../lib/vue/vue.js"></script>
<script src="../../lib/element-ui/elementUI-2.8.2.js"></script>
<script>

    let app = new Vue({

        el: '#app',
        data: {


            form: {


                name: '',
                userAccount: '',
                idCard: '',
                dept: '',
                role: '',
                isActive: '',
                // checkedCities: []
                selectRole: [],
                selectDeptNo: ''

            },
            visitPop: false,
            inputIdCard: '',
            userDept: '',
            tableData: [],
            roleList: [],
            userRoles: [],
            deptList: []

        },
        methods: {

            rowClick: function (row) {

                sessionStorage.setItem("userId", row.userId);

                // this.getEmplLogs(row.userId);

                this.getUserDetail(row.userId);

                getRolesByUserId(row.userId);

            },


            handleCheckedChange: function (value) {

                this.form.selectDeptNo = value;

            },

            getUserDetail: function (userId) {


                $.ajax({

                    url: '/system/getuserdetail',
                    type: 'get',
                    data: {'userId': userId},
                    success: function (result) {

                        if (result.success === true) {

                            // app.userList = result.data;
                            app.form.name = result.data.name;
                            app.form.userAccount = result.data.userAccount;
                            app.form.isActive = result.data.status === '1';
                            app.form.idCard = result.data.idCard;
                            app.userDept = result.data.deptCode;

                            for (let item of app.deptList) {

                                if (item.deptCode === result.data.deptCode) {
                                    // app.userDept = item.deptName;
                                    app.form.selectDeptNo = item.deptCode;
                                    return;
                                }

                            }

                        }

                    }


                })


            },


            updateUser: function () {


                let roles = app.form.selectRole;

                if (!roles.length > 0) {
                    app.$notify.error({
                        title: '错误',
                        message: '角色为空'
                    })
                    return;
                }

                $.ajax({

                    url: '/system/saveUserRole',
                    type: 'get',
                    data: {
                        'userId': sessionStorage.getItem("userId"),
                        'roles': roles.toString(),
                        'deptCode': app.form.selectDeptNo

                    },
                    success: function (result) {

                        if (result.success === true) {

                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            })
                        } else {
                            app.$notify.error({
                                title: '错误',
                                message: result.msg
                            })

                        }

                    }


                })


            },


            resetPassword: function () {

                $.ajax({

                    url: '/system/resetPassword',
                    type: 'get',
                    data: {'idCard': app.inputIdCard, 'userId': sessionStorage.getItem("userId")},
                    success: function (result) {

                        if (result.success === true) {

                            app.$notify.success({
                                title: '成功',
                                message: result.msg
                            })
                            app.visitPop = false;

                        } else {

                            app.$notify.error({

                                title: '错误',
                                message: result.msg

                            })

                        }

                    }


                })


            }

        },

        created: function () {
            getData();
            getDept();
            getRoles();
        }


    });


    /**
     * 获取当前页面最新数据
     * @param current
     */
    function getData(current) {
        $.ajax({

            url: '/const/getalluser',
            // data: {'current': current},
            type: 'get',

            success: function (result) {

                if (result.success === true) {

                    app.tableData = result.data
                }

            }
        })

    };


    function getDept() {
        $.ajax({

            url: '/const/getdept',
            type: 'get',

            success: function (result) {

                if (result.success === true) {

                    app.deptList = result.data
                }

            }
        })
    };

    function getRoles() {

        $.ajax({

            url: '/const/getallroles',
            type: 'get',

            success: function (result) {

                if (result.success === true) {

                    app.roleList = result.data;


                } else {
                    app.$notify.error({

                        title: '错误',
                        message: result.msg

                    })
                }

            }
        })

    }

    function getRolesByUserId(userId) {

        $.ajax({

            url: '/const/getRolesByUser',
            type: 'get',
            data: {'userId': userId},
            beforeSend: function () {
                app.form.selectRole = [];
            },
            success: function (result) {

                if (result.success === true) {


                    for (let item of result.data) {

                        // app.form.selectRole = item.roleNo;
                        app.form.selectRole.push(item.roleNo)


                    }


                }

            }


        })

    }

    /**
     * 格式化时间 yyyy-MM-dd hh:mm:ss
     * @param dateTime
     * @returns {string}
     */
    function formatDate(dateTime) {

        let date = new Date(dateTime);
        let year = date.getFullYear();
        let mon = date.getMonth() + 1;
        let day = date.getDate();


        if (mon < 10) mon = '0' + mon;
        if (day < 10) day = '0' + day;

        return year + '-' + mon + '-' + day;

    }

</script>